<template>
  <div class="right-top">
    <div class="right-top_t">
      <embox-border-1 label="品类数" value="4" style="width:40%" :valueStyle="{color:'#00D8FF'}" ></embox-border-1>
      <embox-border-1 label="今日领取数" value="4" style="width:40%" :valueStyle="{color:'#00D8FF'}" ></embox-border-1>
      <embox-border-1 label="今日归还数" value="4" style="width:40%" :valueStyle="{color:'#37D57A'}" ></embox-border-1>
      <embox-border-1 label="即将过期数" value="4" style="width:40%" :valueStyle="{color:'#FF6D1C'}" ></embox-border-1>
    </div>
    <div class="right-top_b">
      <span style="color:#7E87A3">各品类库存量</span>
      <ul>
        <li style="height: 50px;">
          氢气
          <div style="margin-top: 5px;display: flex;justify-content: space-between;align-items: center;">
            <el-progress style="width:70%" :stroke-width="16" :percentage="20" :color="'#f56c6c'" :show-text="false"></el-progress>
            <div style="width:30%;padding-left: 10px;">剩余量<span style="margin-left: 10px; color: rgba(75, 243, 249, 1);">20</span></div>
          </div>
        </li>
        <li style="height: 50px;">
          一氧化碳
          <div style="margin-top: 5px;display: flex;justify-content: space-between;align-items: center;">
            <el-progress style="width:70%" :stroke-width="16" :percentage="40" :color="'#e6a23c'" :show-text="false"></el-progress>
            <div style="width:30%;padding-left: 10px;">剩余量<span style="margin-left: 10px; color: rgba(75, 243, 249, 1);">40</span></div>
          </div>
        </li>
        <li style="height: 50px;">
          甲烷
          <div style="margin-top: 5px;display: flex;justify-content: space-between;align-items: center;">
            <el-progress style="width:70%" :stroke-width="16" :percentage="80" :color="'#5cb87a'" :show-text="false"></el-progress>
            <div style="width:30%;padding-left: 10px;">剩余量<span style="margin-left: 10px; color: rgba(75, 243, 249, 1);">80</span></div>
          </div>
        </li>
        <li style="height: 50px;">
          丙烷
          <div style="margin-top: 5px;display: flex;justify-content: space-between;align-items: center;">
            <el-progress style="width:70%" :stroke-width="16" :percentage="60" :color="'#1989fa'" :show-text="false"></el-progress>
            <div style="width:30%;padding-left: 10px;">剩余量<span style="margin-left: 10px; color: rgba(75, 243, 249, 1);">60</span></div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>

<style lang="scss" scoped>
.right-top{
  .right-top_t{
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

}
</style>
